<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<style>
			body{
				background-color: #282C35;
				overflow: hidden;
				margin: 0;
				padding: 0;
			}
			#app, #videoBox {
				overflow: hidden;
				height: calc(100% - 100vh / 3.13);
			}
		</style>
		<link href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css" rel="stylesheet">
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/mui/0.5.6/js/mui.min.js"></script> -->
		<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="videoBox"></div>
		</div>
		<script>
			var dp;
			dp = new DPlayer({
				container: document.getElementById('videoBox'),
				autoplay: false,
				playbackSpeed:[0.5, 1, 1.5, 2],
				video: {
					type: 'auto'
				}
			});
			
			function switchVideo(videoUrl){
				dp.switchVideo(
					{
						url: videoUrl,
					}
				);
				dp.play();
			}
			function play(){
				dp.play();
			}
			function pause(){
				dp.pause();
			}
			function seek(time){
				dp.seek(time);
			}
			function toggle(){
				dp.toggle();
			}
			function destroy(){
				dp.destroy();
			}
			function speed(number){
				dp.speed(number);
			}
			function volume(number){
				dp.volume(number);
			}
            function fullScreen(){
				dp.fullScreen.request('browser');
			}
		</script>
	</body>
</html>
